import React, {Component} from 'react'
import {View, Text, TouchableOpacity} from 'react-native'

class Badge extends Component {
    static defaultProps = {
        text: '',
        display: true,
        onPress: () => {},
        color: 'red',
        offsetLeft: 0
    }

    render () {
        if (this.props.display === true) {
            return(
                <TouchableOpacity
                    style={{
                        backgroundColor: this.props.color, 
                        borderRadius: 25, 
                        height: 18, 
                        width: 18, 
                        alignItems: 'center', 
                        justifyContent: 'center', 
                        position: "relative", 
                        left: -10 - this.props.offsetLeft, 
                    }}
                    onPress={() => {this.props.onPress()}}
                >
                    <View>
                        <Text style={{fontSize: 10, color: 'white'}}>{this.props.text}</Text>
                    </View>
                </TouchableOpacity>
            )
        } else {
            return <View style={{width: 18}} />
        }
       
    }
}

export default Badge